<template>
  <div class="save-or-update">
    <el-dialog
      v-if="visible"
      :title="getTitle"
      :before-close="handleClose"
      :visible="visible"
      :width="handleScreenWidthToVw(450)+'px'"
      :close-on-click-modal="false"
      v-loading="loading"
    >
      <el-form ref="form" :model="formData" inline label-suffix="：" :rules="rules">
        <el-form-item label="班次名称" prop="name">
          <el-input
            v-model="formData.name"
            placeholder="请输入班次名称"
            style="width: 260px;"
            clearable
          ></el-input>
        </el-form-item>
        <el-form-item label="时间规则" prop="scheduleTimeRange">
          <el-time-picker
            style="width:260px;"
            is-range
            v-model="formData.scheduleTimeRange"
            range-separator="至"
            start-placeholder="开始时间"
            end-placeholder="结束时间"
            placeholder="选择时间范围"
          />
          <!--          <el-time-picker style="width: 120px;" v-model="formData.startTime" placeholder="时间点"></el-time-picker>-->
          <!--          ~-->
          <!--          <el-time-picker style="width: 120px;" v-model="formData.endTime" placeholder="时间点"></el-time-picker>-->
        </el-form-item>
      </el-form>
      <span slot="footer" class="justify-center">
        <el-button v-loading="loading" type="primary" @click="handleSubmit">提交</el-button>
        <el-button @click="handleClose">取消</el-button>
      </span>
    </el-dialog>
  </div>
</template>

<script>
import { handleScreenWidthToVw } from '@/utils/tools'
import dayjs from 'dayjs'
import { addScheduleShiftTime, apiUpdateScheduleShiftTime } from '@/views/schedule/api'
import { BusinessTypeEnum } from '@/consts'

const START_OF_DAY = dayjs().startOf('day').valueOf()

export default {
  name: 'SaveOrUpdate',
  props: {
    visible: {
      type: Boolean,
      required: true,
      default: false,
    },
    value: {
      type: Object,
      required: false,
      default: () => ({}),
    },
  },

  data() {
    return {
      loading: '',
      formData: {
        name: '',
        scheduleTimeRange: [],
      },
    }
  },
  watch: {
    visible(val) {
      if (val) {
        this.initData()
      }
    },
  },
  computed: {
    handleScreenWidthToVw() {
      return handleScreenWidthToVw
    },
    getTitle() {
      if (this.value.id) {
        return '修改班次'
      } else {
        return '新增班次'
      }
    },
    rules() {
      return {
        name: [{ required: true, message: '请输入班次名称', trigger: 'change' }],
        scheduleTimeRange: [{ required: true, message: '请选择班次事件', trigger: 'change' }],
      }
    },
  },
  methods: {
    initData() {
      if (this.value.id) {
        this.formData = { ...this.value }
        const reg = /(\d+):(\d+)/
        this.value.startTime.match(reg)
        const startTime = [RegExp.$1, RegExp.$2]
        this.value.endTime.match(reg)
        const endTime = [RegExp.$1, RegExp.$2]
        const startOfDay = dayjs().startOf('day')
        const startTimeDate = startOfDay
          .add(startTime[0], 'hour')
          .add(startTime[1], 'minute')
          .toDate()
        const endTimeDate = startOfDay.add(endTime[0], 'hour').add(endTime[1], 'minute').toDate()
        this.$set(this.formData, 'scheduleTimeRange', [startTimeDate, endTimeDate])
      } else {
        this.formData = {
          businessTypeEnum: BusinessTypeEnum.SECURITY,
        }
      }
    },
    handleSubmit() {
      this.$refs.form.validate(async valid => {
        if (!valid) {
          return
        }
        this.loading = false
        const startTime = dayjs(this.formData.scheduleTimeRange[0])
        const endTime = dayjs(this.formData.scheduleTimeRange[1])

        this.formData.startTime = startTime.format('HH:mm')
        this.formData.endTime = endTime.format('HH:mm')

        const formData = {
          ...this.formData,
          startTimeVal: startTime.valueOf() - START_OF_DAY,
          endTimeVal: endTime.valueOf() - START_OF_DAY,
        }
        if (this.value.id) {
          await this.handleUpdate(formData)
        } else {
          await this.handleCreate(formData)
        }
        this.loading = false
        this.$emit('change')
        this.handleClose()
      })
    },
    async handleCreate(formData) {
      await addScheduleShiftTime(formData)
      this.$message.success('添加成功')
    },
    async handleUpdate(formData) {
      await apiUpdateScheduleShiftTime(formData)
      this.$message.success('修改成功')
    },
    handleClose() {
      this.$refs.form.clearValidate()
      this.$emit('update:visible', false)
    },
  },
}
</script>

<style scoped lang="scss">
</style>
